<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        *{
            padding:0;
            margin:0;
        }
        button{
            margin:10px;
            padding:0 10px;
        }
        button.active{
            color:red;
            background: skyblue;
        }
    </style>
</head>
<body>
    <button data-type="1">正在热映</button>
    <button data-type="2">即将上映</button>
    <div id="info"></div>
</body>
<script type="module">
    const btns = document.querySelectorAll("button");
	const info = document.querySelector("#info");
	// 指定默认选中的按钮下标
    let activeIndex = 0;
	btns.forEach((btn,index)=>{
		if(index === activeIndex) btn.className = "active";
		btn.onclick = function(){
			// 将原来被选中按钮移除active样式
            btns[activeIndex].className = null;
			activeIndex = index;
			btns[activeIndex].className = "active";
			getFilms(this.dataset.type);
        }
    });
	// 正在热映：https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=1975855
    // 即将上映：https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=2&k=4862884
    const getFilms = async function(type=1){
		info.innerHTML = "<h3>正在拼命加载中……</h3>"
		// 原生
        // const xhr = new XMLHttpRequest();
		// xhr.responseType = "json";
		// xhr.open("get","https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type="+type);
		// xhr.setRequestHeader("x-client-info",'{"a":"3000","ch":"1002","v":"5.2.1","e":"1761636030257204116520961","bc":"110100"}');
		// xhr.setRequestHeader("x-host","mall.film-ticket.film.list");
		// xhr.send();
		// xhr.onload = function(){
		// 	console.log(xhr.response);
		// 	info.innerHTML = xhr.response.data.films.map(item=>(`
		// 	    <div>
		// 	        <h3>${item.name}</h3>
		// 	        <img height="200" src="${item.poster}" alt="">
		// 	        <hr/>
        //         </div>
		// 	`)).join("")
        // }

        // axios
        const {data} = await axios({
            url:"https://m.maizuo.com/gateway",
            params:{
				cityId:110100,
                pageNum:1,
                pageSize:10,
                type
            },
            headers:{
				"x-client-info":'{"a":"3000","ch":"1002","v":"5.2.1","e":"1761636030257204116520961","bc":"110100"}',
                "x-host":"mall.film-ticket.film.list"
            }
        })
        info.innerHTML = data.data.films.map(item=>(`
            <div>
                <h3>${item.name}</h3>
                <img height="200" src="${item.poster}" alt="">
                <hr/>
            </div>
        `)).join("");
    }
	getFilms();

</script>
</html>